(function () {

    function $(className){
        return document.getElementsByClassName(className);
    }

    var node = $("container").item(0);
    console.log(node.firstElementChild)
    var order =[];

    function render(){
        var timer = setInterval(changeColor, 500);
        var i = 0;

        function changeColor(){
            if( i === 0){
                order[i].style.backgroundColor = "darkseagreen";
                i++;
            }else if( i < order.length){
                order[i-1].style.backgroundColor = "#fff";
                order[i].style.backgroundColor="darkseagreen";
                i++;
            }else {
                clearInterval(timer);
                order[i-1].style.backgroundColor = "#fff";
            }
        }
    }

    function preOrder(node){
        if( node !== null){
            order.push(node);
            preOrder(node.firstElementChild);
            preOrder(node.lastElementChild);
        }
    }

    function init(){
        preOrder(node);
        render();
    }

    init();


})();